<template>
<div class="wrapper">
  <swiper :options="swiperOption" v-if="showSwiper">
    <swiper-slide v-for="item in swiperList" :key="item.id">
      <img width="100%" :src="item.imgUrl" />
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true // 循环
      }
      // swiperList: [
      //   {id: '0001', imgUrl: '//imgcps.jd.com/ling4/65570735583/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5c1361ed82acdd181dd72140/673c20dd/cr_1125x445_0_171/s1125x690/q70.jpg'},
      //   {id: '0002', imgUrl: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/99947/19/14309/187263/5e65b0f3E96c21f3d/b5c46e729cbc8d52.jpg!cr_1125x445_0_171!q70.jpg.dpg'},
      //   {id: '0003', imgUrl: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/87746/5/12701/67310/5e4e57faEbaddd474/a9a72e709283d934.jpg!cr_1125x445_0_171!q70.jpg.dpg'}
      // ]
    }
  },
  computed: { // 计算属性
    showSwiper () {
      return this.swiperList.length
    }
  }
}
</script>

<style lang="stylus" scoped>
// 样式穿透
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
.wrapper
  width:100%
  height:0
  overflow: hidden
  padding-bottom: 31.9% // 图片的宽高比
  background: #eee
// 也可以这样写,部分浏览器有兼容问题
// .wrapper
//   width 100%
//   height:39.55vw
</style>
